<template>
  <div>
    <div ref="pdfContent">
      <!-- Your content to convert to PDF -->
      <h1>总经办 隐患排查（月）</h1>
      <table border="1px" cellspacing="0" >
        <tr>
          <td>单位名称：</td>
          <td colspan="3">重庆市xx有限公司</td>
        </tr>
        <tr>
          <td>检查部门</td>
          <td>总经办</td>
          <td>检查人员</td>
          <td>张红</td>
        </tr>
        <tr>
          <td>检查地址：</td>
          <td colspan="3">重庆市江津区G348停车场</td>
        </tr>
        <tr>
          <td>检查照片</td>
          <img src="https://axd-1256474543.cos.ap-chongqing.myqcloud.com/axd/IMAGE/2024/05/29/8w75MiBVILZ5fDKxhQ_8RQ_1795710132559155200.jpg" style="width: 150px;height: 150px;">
        </tr>

        <tr>
          <td rowspan="6">检查项目</td>
          <td colspan="3">安全管理</td>
        </tr>

        <tr>
          <td>主要负责人考核合格证明√</td>
          <td>公司制度文件合规性检查√</td>
          <td>周排查记录√</td>
        </tr>

        <tr>
          <td>安全管理人员考核合格证明√</td>
          <td>安全费用使用记录√</td>
          <td>安全费用提取记录√√</td>
        </tr>

        <tr>
          <td>安全隐患通报记录√</td>
          <td>岗前培训记录√</td>
          <td>日常培训记录√</td>
        </tr>

        <tr>
          <td>日排查记录√</td>
          <td>月排查记录√</td>
          <td>目标责任考核记录√</td>
        </tr>

        <tr>
          <td>车辆管理登记台账√</td>
          <td>运输车辆安全技术档案√</td>
          <td>风险分级管控清单（公司级）√</td>
        </tr>

        <tr>
          <td>隐患项目√</td>
          <td colspan="3">无隐患项目√</td>
        </tr>

        <tr>
          <td>
            <img v-if="qrCodeUrl" :src="qrCodeUrl" style="width: 100px;height: 100px;">
            <br/>
            扫描查询真伪
            <br/>
            网址：https://risk.cqxingxun.com/
          </td>
          <td colspan="3">检查人员签名：</td>
        </tr>

      </table>

    </div>
    <el-button type="primary" plain icon="Refresh" @click="generatePDF">生成隐患排查(月)PDF</el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    async generatePDF() {
      const element = document.body; // 要转换成PDF的HTML元素
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');

      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: 'a4',
      });

      const imgProps= pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('download.pdf');
    },
  },
};
</script>